<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form>
      <input type="file" />
      <button type="submit">上传</button>
    </form>
    <script>
      const form = document.querySelector('form');
      const fileInput = form.querySelector('input[type=file]');

      fileInput.addEventListener('change', (e) => {
        const fileList = e.target.files;
        console.log(fileList[0]);

        const file = document.querySelector('input[type=file]').files[0];
        const chunkSize = 1024 * 1024; // 1MB
        const chunkCount = Math.ceil(file.size / chunkSize);

        console.log(chunkCount);

        const blob = new Blob(['Hello, world!'], { type: 'text/plain' });
        console.log(`upload.html 29`, blob.chunkCount);
      });

      form.addEventListener('submit', async (e) => {
        e.preventDefault();

        if (fileInput.files.length === 0) {
          alert('请选择文件');
          return;
        }

        // const formData = new FormData();
        // Array.from(fileInput.files).forEach((file) => {
        //   formData.append('files[]', file);
        // });

        // try {
        //   const response = await fetch('/upload', {
        //     method: 'POST',
        //     body: formData,
        //   });
        //   console.log(await response.text());
        // } catch (error) {
        //   console.error(error);
        // }
      });
    </script>
  </body>
</html>
